import { Radio, Switch } from '@kedacom/react-next'
import shallow from 'zustand/shallow'
import CreateMember from '../../components/CreateMember'
import { useMeetingDcsStore } from './store'
import { StyledWrap, TitleWrap } from './style'
import { setDcsList } from '../../store.combine'
import { t } from 'i18next'
export default function MeetingDcs() {
	const { enable, update, mode, dcs_members, changeMode } = useMeetingDcsStore(
		(state) => ({
			init: state.init,
			enable: state.enable,
			mode: state.mode,
			update: state.update,
			changeMode: state.changeMode,
			dcs_members: state.dcs_members,
		}),
		shallow
	)
	const Title = () => {
		return (
			<>
				<TitleWrap>
					<div className="dcs_title">{t('协作方列表')} </div>
					<div className="dcs_num_tip">{t('已选')}</div>
					<div className="dcs_num">{dcs_members.length}</div>
					<div className="dcs_tip">{t('仅限32方')}</div>
				</TitleWrap>
			</>
		)
	}
	return (
		<StyledWrap className="dcs">
			<div className="line">
				<div className="label_title">{t('数据协作')}</div>
				<Switch
					width={40}
					height={22}
					className="video"
					checked={enable}
					onChange={(e, v) => {
						update({ enable: v })
					}}
				></Switch>
			</div>
			{enable && (
				<div className="line">
					<div className="label_title">{t('权限控制')}</div>
					<Radio
						checked={mode === 2}
						onChange={() => {
							changeMode(2)
						}}
						width={120}
					>
						{t('自由协作')}
					</Radio>
					<Radio
						checked={mode === 1}
						onChange={() => {
							changeMode(1)
						}}
						width={120}
					>
						{t('管理方控制')}
					</Radio>
				</div>
			)}
			{enable && mode === 1 && (
				<CreateMember
					title={Title()}
					width={540}
					height={320}
					list={dcs_members}
					setOuterList={(h, type) => {
						if (type === 'drop') {
							setDcsList(h)
						} else {
							update({ dcs_members: h })
						}
					}}
					isHideOrder={true}
				></CreateMember>
			)}
		</StyledWrap>
	)
}
